<script lang="ts" setup>
import { ref, reactive, onMounted } from 'vue';
import { ElMessage, FormInstance, FormRules } from 'element-plus';
import useStore from '@/store';
import { props } from './form';
defineOptions({ name: 'LensForm' });
const _props = defineProps(props);
const save = async () => {
  if (!ruleFormRef.value) return;
  await ruleFormRef.value.validate((valid, fields) => {
    if (valid) {
      window.$api.lens.save(form).then(res => {
        debugger;
        ElMessage.success('保存成功!');
        useStore.window.windowRemove(_props.window?.name);
        if (_props.window?.callBack) _props.window?.callBack();
      });
    }
  });
};
const focus = ref([]);
const refraction = ref([]);
const specialApply = ref([]);
const technology = ref([]);
const texture = ref([]);
const lensBrand = ref([]);
const colorProcess = ref([]);
const corridorProcess = ref([]);
const coatingProcess = ref([]);
const mirrorProcess = ref([]);
const tintingProcess = ref([]);
const suppliers = ref([]);
const currencys = ref([]);
const glassesTypes = ref([]);
const lensType = ref([]);
const ruleFormRef = ref<FormInstance>();
const form = reactive({
  id: null,
  salesLensCode: null,
  salesLensName: null,
  factoryLensCode: null,
  factoryLensName: null,
  brand: null,
  supplierNames: null,
  lensType: null,
  maxSPH: null,
  minSPH: null,
  maxCYL: null,
  minCYL: null,
  maxADD: null,
  minADD: null,
  size: null,
  cgPrice: null,
  price: null,
  isBulk: null,
  type: null,
  refraction: null,
  transition: null,
  vouchers: 0,
  color: '',
  corridor: '',
  mirror: '',
  tinting: '',
  coating: '',
  cost: null,
  currencyId: null,
  technologyCode: null,
  focusCode: null,
  applyCode: null,
  textureCode: null,
  unit: null,
  isEnable: null,
  supplierIds: [],
});
const rules = reactive<FormRules>({
  supplierIds: [{ required: true, message: '请选择供应商', trigger: 'change' }],
  salesLensCode: [
    { required: true, message: '请输入销售镜种代码', trigger: 'blur' },
    { max: 50, message: '不能多于10个字符', trigger: 'blur' },
  ],
  salesLensName: [
    { required: true, message: '请输入销售镜种名称', trigger: 'blur' },
    { max: 50, message: '不能多于50个字符', trigger: 'blur' },
  ],
  factoryLensCode: [
    { required: true, message: '请输入工厂镜种代码', trigger: 'blur' },
    { max: 50, message: '不能多于10个字符', trigger: 'blur' },
  ],
  factoryLensName: [
    { required: true, message: '请输入工厂镜种名称', trigger: 'blur' },
    { max: 50, message: '不能多于50个字符', trigger: 'blur' },
  ],
  type: [{ required: true, message: '请选择镜种类型', trigger: 'change' }],
  lensType: [{ required: true, message: '请选择镜片类型', trigger: 'change' }],
  price: [
    {
      required: true,
      message: '请输入价格',
      trigger: 'blur',
    },
  ],
  cgPrice: [
    {
      required: true,
      message: '请输入采购价格',
      trigger: 'blur',
    },
  ],
  cost: [
    {
      required: true,
      message: '请输入成本',
      trigger: 'blur',
    },
  ],
  currencyId: [{ required: true, message: '请选择货币类型', trigger: 'change' }],
  maxSPH: [
    {
      required: true,
      message: '请输入最大SPH',
      trigger: 'blur',
    },
  ],
  minSPH: [
    {
      required: true,
      message: '请输入最小SPH',
      trigger: 'blur',
    },
  ],
  maxCYL: [
    {
      required: true,
      message: '请输入最大CYL',
      trigger: 'blur',
    },
  ],
  minCYL: [
    {
      required: true,
      message: '请输入最小CYL',
      trigger: 'blur',
    },
  ],
  maxADD: [
    {
      required: true,
      message: '请输入最大ADD',
      trigger: 'blur',
    },
  ],
  minADD: [
    {
      required: true,
      message: '请输入最小ADD',
      trigger: 'blur',
    },
  ],
  size: [
    { required: true, message: '请输入size', trigger: 'blur' },
    { max: 50, message: '不能多于10个字符', trigger: 'blur' },
  ],
  brand: [{ required: true, message: '请选择applyCode', trigger: 'change' }],
  technologyCode: [{ required: true, message: '请选择工艺特点', trigger: 'change' }],
  focusCode: [{ required: true, message: '请选择焦点', trigger: 'change' }],
  textureCode: [{ required: true, message: '请选择材质', trigger: 'change' }],
  applyCode: [{ required: true, message: '请选择特殊应用', trigger: 'change' }],
});
/** 加载基础数据,字典等 */
const init = async () => {
  focus.value = useStore.dictionary.getComboBoxItems('Focus');
  refraction.value = useStore.dictionary.getComboBoxItems('Refraction');
  specialApply.value = useStore.dictionary.getComboBoxItems('SpecialApply');
  technology.value = useStore.dictionary.getComboBoxItems('Technology');
  texture.value = useStore.dictionary.getComboBoxItems('Texture');
  lensBrand.value = useStore.dictionary.getComboBoxItems('LensBrand');
  glassesTypes.value = useStore.dictionary.getComboBoxItems('GlassesType');
  lensType.value = useStore.dictionary.getComboBoxItems('LensType');
  await window.$api.salesProcess.getByValue('Color').then(res => {
    colorProcess.value = res.data;
  });
  await window.$api.salesProcess.getByValue('Corridor').then(res => {
    corridorProcess.value = res.data;
  });
  await window.$api.salesProcess.getByValue('JUSE').then(res => {
    coatingProcess.value = res.data;
  });
  await window.$api.salesProcess.getByValue('SHUIYIN').then(res => {
    mirrorProcess.value = res.data;
  });
  await window.$api.salesProcess.getByValue('RANSE').then(res => {
    tintingProcess.value = res.data;
  });
  await window.$api.supplier.getSuppliers().then(res => {
    suppliers.value = res.data;
  });
  await window.$api.currency.getCurrencys().then(res => {
    currencys.value = res.data;
  });
};
const detail = () => {
  window.$api.lens.detail(_props.window.params.id).then(res => {
    form.id = res.data.id;
    form.salesLensCode = res.data.salesLensCode;
    form.salesLensName = res.data.salesLensName;
    form.factoryLensCode = res.data.factoryLensCode;
    form.factoryLensName = res.data.factoryLensName;
    form.brand = res.data.brand;
    form.supplierNames = res.data.supplierNames;
    form.lensType = res.data.lensType;
    form.maxSPH = res.data.maxSPH;
    form.minSPH = res.data.minSPH;
    form.maxCYL = res.data.maxCYL;
    form.minCYL = res.data.minCYL;
    form.maxADD = res.data.maxADD;
    form.minADD = res.data.minADD;
    form.size = res.data.size;
    form.cgPrice = res.data.cgPrice;
    form.price = res.data.price;
    form.isBulk = res.data.isBulk;
    form.type = res.data.type;
    form.refraction = res.data.refraction;
    form.transition = res.data.transition;
    form.vouchers = res.data.vouchers;
    form.color = res.data.color;
    form.corridor = res.data.corridor;
    form.mirror = res.data.mirror;
    form.tinting = res.data.tinting;
    form.coating = res.data.coating;
    form.cost = res.data.cost;
    form.currencyId = res.data.currencyId;
    form.technologyCode = res.data.technologyCode;
    form.focusCode = res.data.focusCode;
    form.applyCode = res.data.applyCode;
    form.textureCode = res.data.textureCode;
    form.unit = res.data.unit;
    form.supplierIds = res.data.supplierIds;
  });
};
onMounted(() => {
  init();
  if (_props.window.params) {
    if (_props.window.params.id) {
      detail();
    }
  }
});
</script>

<template>
  <windows-window :window="window">
    <template #button>
      <windows-button-group size="18">
        <windows-button icon="fluent-save-28-regular" @click="save"></windows-button>
      </windows-button-group>
    </template>
    <el-form ref="ruleFormRef" :model="form" :rules="rules" label-width="110px" class="demo-ruleForm" size="default" status-icon>
      <el-row>
        <el-col :span="24">
          <el-form-item label="供应商" prop="supplierIds">
            <el-tree-select
              ref="treeRef"
              v-model="form.supplierIds"
              node-key="id"
              :data="suppliers"
              :props="{
                children: 'children',
                label: 'name',
              }"
              multiple
              highlight-current
              default-expand-all
              check-strictly
            ></el-tree-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="销售镜种代码" prop="salesLensCode">
            <el-input v-model="form.salesLensCode" placeholder="请输入销售镜种代码" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="销售镜种名称" prop="salesLensName">
            <el-input v-model="form.salesLensName" placeholder="请输入销售镜种名称" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="工厂镜种代码" prop="factoryLensCode">
            <el-input v-model="form.factoryLensCode" placeholder="请输入工厂镜种代码" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="工厂镜种名称" prop="factoryLensName">
            <el-input v-model="form.factoryLensName" placeholder="请输入工厂镜种名称" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="6">
          <el-form-item label="镜种类型" prop="type">
            <el-select v-model="form.type">
              <el-option v-for="item in glassesTypes" :key="item.value" :label="item.name" :value="item.value" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="镜片类型" prop="lensType">
            <el-select v-model="form.lensType">
              <el-option v-for="item in lensType" :key="item.value" :label="item.name" :value="item.value" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="单位" prop="unit">
            <el-input v-model="form.unit" placeholder="请输入单位" />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="优惠券" prop="vouchers">
            <el-input-number v-model="form.vouchers" placeholder="请输入优惠券" controls-position="right" :min="0" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="6">
          <el-form-item label="价格" prop="price">
            <el-input-number v-model="form.price" placeholder="请输入价格" controls-position="right" :precision="2" :step="0.1" />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="采购价格" prop="cgPrice">
            <el-input-number v-model="form.cgPrice" placeholder="请输入采购价格" controls-position="right" :precision="2" :step="0.1" />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="成本" prop="cost">
            <el-input-number v-model="form.cost" placeholder="请输入成本" controls-position="right" :precision="2" :step="0.1" />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="货币类型" prop="currencyId">
            <el-select v-model="form.currencyId">
              <el-option v-for="item in currencys" :key="item.id" :label="item.name" :value="item.id" />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="6">
          <el-form-item label="最大SPH" prop="maxSPH">
            <el-input-number v-model="form.maxSPH" placeholder="请输入最大SPH" controls-position="right" :step="25" step-strictly />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="最小SPH" prop="minSPH">
            <el-input-number v-model="form.minSPH" placeholder="请输入最小SPH" controls-position="right" :step="25" step-strictly />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="最大CYL" prop="maxCYL">
            <el-input-number v-model="form.maxCYL" placeholder="请输入最大CYL" controls-position="right" :step="25" step-strictly />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="最小CYL" prop="minCYL">
            <el-input-number v-model="form.minCYL" placeholder="请输入最小CYL" controls-position="right" :step="25" step-strictly />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="6">
          <el-form-item label="最大ADD" prop="maxADD">
            <el-input-number v-model="form.maxADD" placeholder="请输入最大ADD" controls-position="right" :step="25" step-strictly />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="最小ADD" prop="minADD">
            <el-input-number v-model="form.minADD" placeholder="请输入最小ADD" controls-position="right" :step="25" step-strictly />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="Size" prop="size">
            <el-input v-model="form.size" placeholder="请输入Size" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="6">
          <el-form-item label="镜种品牌" prop="brand">
            <el-select v-model="form.brand">
              <el-option v-for="item in lensBrand" :key="item.value" :label="item.name" :value="item.value" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="折射率" prop="reflaction">
            <el-select v-model="form.refraction">
              <el-option v-for="item in refraction" :key="item.value" :label="item.name" :value="item.value" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="工艺特点" prop="technologyCode">
            <el-select v-model="form.technologyCode">
              <el-option v-for="item in technology" :key="item.value" :label="item.name" :value="item.value" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="焦点" prop="focusCode">
            <el-select v-model="form.focusCode">
              <el-option v-for="item in focus" :key="item.value" :label="item.name" :value="item.value" />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="6">
          <el-form-item label="材质" prop="textureCode">
            <el-select v-model="form.textureCode">
              <el-option v-for="item in texture" :key="item.value" :label="item.name" :value="item.value" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="特殊应用" prop="applyCode">
            <el-select v-model="form.applyCode">
              <el-option v-for="item in specialApply" :key="item.value" :label="item.name" :value="item.value" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="Color" prop="color">
            <el-select v-model="form.color">
              <el-option v-for="item in colorProcess" :key="item.name" :label="item.name" :value="item.name" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="Corridor" prop="corridor">
            <el-select v-model="form.corridor">
              <el-option v-for="item in corridorProcess" :key="item.name" :label="item.name" :value="item.name" />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="6">
          <el-form-item label="Coating" prop="coating">
            <el-select v-model="form.coating">
              <el-option v-for="item in coatingProcess" :key="item.name" :label="item.name" :value="item.name" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="Mirror" prop="mirror">
            <el-select v-model="form.mirror">
              <el-option v-for="item in mirrorProcess" :key="item.name" :label="item.name" :value="item.name" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="Tinting" prop="tinting">
            <el-select v-model="form.tinting">
              <el-option v-for="item in tintingProcess" :key="item.name" :label="item.name" :value="item.name" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6"></el-col>
      </el-row>
      <el-row>
        <el-col :span="6">
          <el-form-item label="是否ADD镜种" prop="isBulk">
            <el-switch v-model="form.isBulk" inline-prompt active-text="是" inactive-text="否"></el-switch>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="是否转换" prop="transition">
            <el-switch v-model="form.transition" inline-prompt active-text="是" inactive-text="否"></el-switch>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="状态" prop="isEnable">
            <el-switch v-model="form.isEnable" inline-prompt active-text="启用" inactive-text="停用"></el-switch>
          </el-form-item>
        </el-col>
        <el-col :span="6"></el-col>
      </el-row>
    </el-form>
  </windows-window>
</template>

<style scoped lang="scss">
#edit {
  height: 100%;
}
.el-form {
  margin: 30px 20px;
}
.custom-node {
  display: flex;
  align-items: center;
  span {
    margin-left: 5px;
  }
}
.select-icon {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  border: 1px solid #dcdfe6;
  border-radius: 5px;
  margin-top: 5px;
  background: #fff;
  width: 100%;
  height: 200px;
  overflow: auto;
  .el-image {
    margin: 10px;
    cursor: pointer;
    border-radius: 5px;
    padding: 5px;
    &:hover,
    &.active {
      background: #dcdfe6;
    }
  }
}
</style>
